<template>
  <view class="rule">
    <!-- <view class="rule-btn" :style="{ top: top }" @click="open"> 活动规则 </view> -->
    <view
      v-if="false"
      style="
        position: absolute;
        top: 200rpx;
        right: 50%;
        width: 174rpx;
        margin: 0 auto;
        transform: translateX(50%);
        text-align: center;
        border-radius: 12rpx;
        color: #702a00;
        cursor: pointer;
      "
      @click="open"
    >
      <image
        style="width: 100%"
        src="https://wxlsrecode2.oss-cn-shanghai.aliyuncs.com/lottery_model/2024-01-30/18f63d64-5cf4-4710-83d2-563e21c14c92.png"
        mode="widthFix"
      >
      </image>
    </view>
    <popup ref="popup" @change="popupChange">
      <view class="popup-container" style="width: 8rem; max-height: 75vh">
        <view class="close-btn" @click="close">
          <text class="dyicon icon-guanbi"></text>
        </view>

        <view class="rule-box flex flex-direction-column">
          <h3 style="font-size: 20px; text-align: center; margin-bottom: 10px"> 活动规则 </h3>
          <scroll-view scroll-y="true" style="height: calc(100% - 40px)">
            <view v-if="id && articleDetail" class="desc" v-html="articleDetail.context"></view>
            <view v-else class="desc" v-html="value"></view>
          </scroll-view>
        </view>
      </view>
    </popup>
  </view>
</template>

<script>
  import popup from '@/components/popup/index.vue';
  export default {
    name: 'rule',
    components: {
      popup,
    },
    props: {
      id: {
        type: String | Number,
        default: '',
      },
      value: {
        type: String,
        default: '',
      },
      top: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        articleDetail: null,
      };
    },
    async mounted() {
      if (this.id) this.articleDetail = await this.getArticleDetail();
    },
    methods: {
      getArticleDetail() {
        return new Promise((resolve, reject) => {
          uni.request({
            url: 'https://api.wxls.pro/cms/pass/news/' + this.id,
            method: 'GET',
            success: (res) => {
              resolve(res.data.data);
            },
            fail: (err) => {
              reject(err);
            },
          });
        });
      },
      open() {
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
      },
      popupChange(e) {},
    },
  };
</script>

<style lang="scss" scoped>
  .popup-container {
    position: relative;
    // width: 80%;
    padding: 20rpx;
    border-radius: 24rpx;
    background-color: #fff;
  }

  .rule {
  }

  .rule-btn {
    position: fixed;
    right: 0;
    top: 0;
    width: 20px;
    border-radius: 12rpx 0 0 12rpx;
    background-color: #ed722f;
    color: #fff;
    font-size: 12px;
    padding: 4px;
    cursor: pointer;
  }

  .rule-box {
    height: 100%;
  }

  .desc {
    overflow: hidden;
    background-color: #fff;
    padding: 0px 8px;
    font-size: 14px;
    line-height: 1.75;
    // color: #aaa2a2;
    color: #666;

    /deep/ img,
    p,
    span {
      max-width: 100% !important;
      height: auto !important;
    }
    /deep/ p {
      margin: 1px 0;
    }
  }

  .close-btn {
    position: absolute;
    top: 16rpx;
    right: 16rpx;
    width: 32rpx;
    height: 32rpx;
    font-size: 32rpx;
    line-height: 32rpx;
  }
</style>
